<%@page language="java" contentType="text/html; charset=utf-8"%>
<html lang="en" xmlns:ext="http://www.extjs.com/docs">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ExtJS 3.2.0 API Documentation</title>
   <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="js/flow.js"></script>
<script type="text/javascript" src="check-tree.js"></script>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all.js"></script>
    <script type="text/javascript" src="ext/examples/form/states.js"></script>
 	<script type="text/javascript" src="ext/examples/shared/examples.js"></script>
 	<script language="javascript" src="dwr/util.js"></script>
<script language="javascript" src="dwr/engine.js"></script>
 	<script type="text/javascript" src="dwr/interface/ConferenceAjax.js"></script>
 
<style type="text/css"> 
.app-header .x-panel-body {
    background-color: #ddd;
    padding-left: 5px;
}
 
.app-header h1 {
    font-family: verdana,arial,sans-serif;
    font-size: 20px;
    color: #15428B;
}
 
.hospital-target {
    border: 1px solid red;
    width: 400ps;
    height: 16px;
    margin: 5px;
    padding: 5px;
}
 
.hospital-target.hospital-target-hover {
	height:200px;
	width:200px;
    background-color: #C0C0C0;
}
 
.patient-source {
    cursor: pointer;
}
 
.patient-view td {
    font-family: verdana,arial,sans-serif;
    font-size: 12px;
}
 
td.patient-label {
    background-color: #ddd;
    border: 1px solid #bbb;
    font-weight: bold;
    text-align: right;
    width: 100px;
    padding: 0px 3px 0px 0px;
}
 
.patient-over {
    background-color:#EFEFEF;
    cursor: pointer;
}
.patient-selected {
    background-color: #DFE8F6;
    cursor: pointer;
}
</style>
<title>Ext Drag/Drop</title>
</head>
<body>
<div id="div_bar"></div>
<div id="west"></div>
<div id="props-panel" class="x-hide-display" style="width:200px;height:200px;overflow:hidden;">
    </div>
    <div id="south" class="x-hide-display">
        <p>south - generally for informational stuff, also could be for status bar</p>
    </div>

</body>

</html>
<script>
/*!
 * Ext JS Library 3.2.0
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
 var portletData;
 function savePortletData(data){
	 portletData=data;
	 }
Ext.onReady(function() {

	//todoConferenceAjax.getPortletData(savePortletData);
	

    var patients = [{
        id: '1',
        name: '待办事宜'
     
    }, {
       id: '2',
        name: '会议通知'
    }, {
       id: '3',
        name: '通知公告'
    }, {
       id: '4',
        name: '收文'
    }, {
       id: '5',
        name: '短信提醒'
    }];

    var PatientRecord = Ext.data.Record.create([ {
        name: 'name'
    }]);

    var patientStore = new Ext.data.Store({
        data: patients,
        reader: new Ext.data.JsonReader({
            id: 'id'
        }, PatientRecord)
    });

    var hospitals = [{
        id: '1',
        name: '左上角'
       
    }, {
         id: '2',
        name: '右上角'
    }, {
        id: '3',
        name: '左下角'
    }, {
         id: '4',
        name: '右下角'
    }];
    
    var HospitalRecord = Ext.data.Record.create([{
        name: 'name'
    }]);

    var hospitalStore = new Ext.data.Store({
    	autoLoad:true,
        remoteSort: true,
       // proxy: new Ext.data.HttpProxy({url:"127.0.0.1"}),
        dataUrl: 'http://127.0.0.1/zfoa2/customform/out1.jsp',
      //  data: hospitals,
        reader: new Ext.data.JsonReader({
            id: 'id'
        }, HospitalRecord)
    });
    

   

  



 var tree = new Ext.tree.TreePanel({
       el: 'div_bar',
       animate:true,
       autoScroll:true,
       border: false,
       height: 300,
       width: 300,
   
      loader: new Ext.tree.TreeLoader({dataUrl: 'http://127.0.0.1/zfoa2/customform/out.jsp'})
    });
    var root = new Ext.tree.AsyncTreeNode({
        id: '0',
        text:'root'
    });
   
    
 tree.on("click", function(node) {
            Ext.Msg.show({
                title: '提示',
                msg: "您单击了" + node.id,
                animEl: node.ui.textNode

				//todoConferenceAjax.getPortlets(node.id,);

                
            });
        });
    tree.setRootNode(root);

    root.expand(false, false);
   








    var viewport = new Ext.Viewport({
        layout: 'border',
        items: [
        // create instance immediately
        new Ext.BoxComponent({
            region: 'north',
            height: 32, // give north and south regions a height
            autoEl: {
                tag: 'div',
                html:'<p>north - generally for menus, toolbars and/or advertisements</p>'
            }
        }), 


       {
            region: 'west',
            id: 'west-panel', // see Ext.getCmp() below
            title: 'West',
            split: true,
            width: 200,
            minSize: 175,
            maxSize: 400,
            collapsible: true,
            margins: '0 0 0 5',
            layout: {
                type: 'accordion',
                animate: true
            },
            items: [tree]
        },
        {
            region: 'center',
            title: 'center',
            split: true,
            width: 200,
            minSize: 175,
            maxSize: 400,
            collapsible: true,
            margins: '0 0 0 5',
            layout: {
                type: 'accordion',
                animate: true
            },
            items: [ 
                    new Ext.DataView({
                tpl: '<tpl for=".">' +
                '<div class="patient-source"><table><tbody>' +
                    '<tr><td class="patient-label">名称</td><td class="patient-name">{name}</td></tr>' +
                  
                '</tbody></table></div>' +
             '</tpl>',
        itemSelector: 'div.patient-source',
        overClass: 'patient-over',
        selectedClass: 'patient-selected',
        singleSelect: true,
        store: patientStore,
        listeners: {
            render: initializePatientDragZone
        }
    })
            ]
        },
        // in this instance the TabPanel is not wrapped by another panel
        // since no title is needed, this Panel is added directly
        // as a Container
        new Ext.grid.GridPanel({
       	 region: 'east',
            title: 'East Side',
            collapsible: true,
            split: true,
            width: 225, // give east and west regions a width
            minSize: 175,
            maxSize: 400,
            margins: '0 5 0 0',
            layout: 'fit', 
          
           columns: [{
               dataIndex: 'name',
               header: '标题',
               width: 200
           }],
           viewConfig: {
               tpl: new Ext.XTemplate('<div class="hospital-target">{name}拖动到这里</div>'),
               enableRowBody: true,
               getRowClass: function(rec, idx, p, store) {
                   p.body = this.tpl.apply(rec.data);
               }
           },
           store: hospitalStore,
           listeners: {
               render: initializeHospitalDropZone
           }
       })
      




        ]
    });























    
   
});

/*
 * Here is where we "activate" the DataView.
 * We have decided that each node with the class "patient-source" encapsulates a single draggable
 * object.
 *
 * So we inject code into the DragZone which, when passed a mousedown event, interrogates
 * the event to see if it was within an element with the class "patient-source". If so, we
 * return non-null drag data.
 *
 * Returning non-null drag data indicates that the mousedown event has begun a dragging process.
 * The data must contain a property called "ddel" which is a DOM element which provides an image
 * of the data being dragged. The actual node clicked on is not dragged, a proxy element is dragged.
 * We can insert any other data into the data object, and this will be used by a cooperating DropZone
 * to perform the drop operation.
 */
function initializePatientDragZone(v) {
    v.dragZone = new Ext.dd.DragZone(v.getEl(), {

//      On receipt of a mousedown event, see if it is within a draggable element.
//      Return a drag data object if so. The data object can contain arbitrary application
//      data, but it should also contain a DOM element in the ddel property to provide
//      a proxy to drag.
        getDragData: function(e) {
            var sourceEl = e.getTarget(v.itemSelector, 10);
            if (sourceEl) {
                d = sourceEl.cloneNode(true);
                d.id = Ext.id();
                return v.dragData = {
                    sourceEl: sourceEl,
                    repairXY: Ext.fly(sourceEl).getXY(),
                    ddel: d,
                    patientData: v.getRecord(sourceEl).data
                }
            }
        },

//      Provide coordinates for the proxy to slide back to on failed drag.
//      This is the original XY coordinates of the draggable element.
        getRepairXY: function() {
            return this.dragData.repairXY;
        }
    });
}

/*
 * Here is where we "activate" the GridPanel.
 * We have decided that the element with class "hospital-target" is the element which can receieve
 * drop gestures. So we inject a method "getTargetFromEvent" into the DropZone. This is constantly called
 * while the mouse is moving over the DropZone, and it returns the target DOM element if it detects that
 * the mouse if over an element which can receieve drop gestures.
 *
 * Once the DropZone has been informed by getTargetFromEvent that it is over a target, it will then
 * call several "onNodeXXXX" methods at various points. These include:
 *
 * onNodeEnter
 * onNodeOut
 * onNodeOver
 * onNodeDrop
 *
 * We provide implementations of each of these to provide behaviour for these events.
 */
function initializeHospitalDropZone(g) {
    g.dropZone = new Ext.dd.DropZone(g.getView().scroller, {

//      If the mouse is over a target node, return that node. This is
//      provided as the "target" parameter in all "onNodeXXXX" node event handling functions
        getTargetFromEvent: function(e) {
            return e.getTarget('.hospital-target');
        },

//      On entry into a target node, highlight that node.
        onNodeEnter : function(target, dd, e, data){ 
            Ext.fly(target).addClass('hospital-target-hover');
        },

//      On exit from a target node, unhighlight that node.
        onNodeOut : function(target, dd, e, data){ 
            Ext.fly(target).removeClass('hospital-target-hover');
        },

//      While over a target node, return the default drop allowed class which
//      places a "tick" icon into the drag proxy.
        onNodeOver : function(target, dd, e, data){ 
            return Ext.dd.DropZone.prototype.dropAllowed;
        },

//      On node drop, we can interrogate the target node to find the underlying
//      application object that is the real target of the dragged data.
//      In this case, it is a Record in the GridPanel's Store.
//      We can use the data set up by the DragZone's getDragData method to read
//      any data we decided to attach.
        onNodeDrop : function(target, dd, e, data){
            var rowIndex = g.getView().findRowIndex(target);
            var h = g.getStore().getAt(rowIndex);
            var targetEl = Ext.get(target);
            targetEl.update(data.patientData.name);
           // Ext.Msg.alert('Drop gesture', 'Dropped patient ' + data.patientData.name +
           //     ' on hospital ' + h.data.name);
            return true;
        }
    });
}

</script>
